<template>
  <view class="select-package">
    <!-- 问卷 -->
    <view class="question" @click="openAskDialog">
      <view class="question-left"> <span style="color: #f00">*</span>填写需求问卷 </view>
      <view style="padding-top: 8px">
        <image v-if="finish" src="/static/yes.png" class="question-img" />
      </view>
    </view>

    <view class="section">
      <!-- 定制容量规格 -->
      <view class="section-title">
        <image src="/static/select.png" class="search-icon" />
        <view>调酒容量规格</view>
      </view>
      <view class="volume-row">
        <view class="volume-picker active"> {{ volumes.sku }}ml </view>
      </view>
    </view>

    <view class="back-arm">
      <view class="back-left">
        <view>合计：</view>
        <view class="price-text">￥{{ priceCount || 0 }}</view>
      </view>
      <view class="back-Right" @click="nextStep">
        <text>下一步</text>
      </view>
    </view>
    <Ask-dialog ref="askDialogRef" @complete="askCompleted" />
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { redirect } from "@/utils/common";
import AskDialog from "@/addon/shop/components/ask/index.vue";
import { getOther } from "@/addon/shop/api/select";

const volumes = ref({}); // 定制容量规格
const bartenderPrepay = ref(0); // 预付金
const askDialogRef = ref(null); // 问卷弹窗
const finish = ref(false); // 问卷填写完毕
const bartender_id = ref(null); // 专家id
const wineForm = ref({}); // 酒体表单

onLoad((e) => {
  if (e.bartender_id) bartender_id.value = e.bartender_id;
  getVolumes();
});

// 总金额
const priceCount = computed(() => {
  let money = parseFloat(volumes.value.delivery_money);
  let prepay = parseFloat(bartenderPrepay.value);
  let res = finish.value ? money + prepay : money;
  return res.toFixed(2);
});

// 获取定制容量规格
const getVolumes = () => {
  getOther().then((res) => {
    volumes.value = JSON.parse(res.data.bartender_sku);
    bartenderPrepay.value = res.data.bartender_prepay;
  });
};

// 打开问卷
const openAskDialog = () => {
  askDialogRef.value.openDialog({
    price: bartenderPrepay.value,
    bartender_id: bartender_id.value,
  });
};

// 问卷填写完成
const askCompleted = (val) => {
  finish.value = val.finish;
  if (val.finish && val.baseForm) {
    let survey = {};
    if (val.baseForm.dingzhi_type == 1) {
      survey = { ...val.customForm, ...val.sceneForm };
    }
    if (val.baseForm.dingzhi_type == 2) {
      survey = { ...val.optimizeForm, ...val.sceneForm };
    }
    if (val.baseForm.dingzhi_type == 3 && val.baseForm.is_needs_questionnaire == 1) {
      survey = { ...val.optimizeForm, ...val.sceneForm };
    }
    bartender_id.value = val.baseForm.bartender_id;
    wineForm.value = {
      alcohol_type: 2,
      alcohol_data: {
        sku: volumes.value.sku,
        ...val.baseForm,
        needs_questionnaire: JSON.stringify(survey),
        order_logo: []
      },
    };
    delete wineForm.value.alcohol_data.price;
    delete wineForm.value.alcohol_data.authChecked;
  }
  if (!val.finish && val.bartender_id) {
    bartender_id.value = val.bartender_id;
  }
};

// 下一步
const nextStep = () => {
  console.log("下一步");
  if (!finish.value) {
    uni.showToast({
      title: "需求问卷未填写完全",
      icon: "none",
    });
    return;
  } else {
    uni.setStorage({
      key: "orderCreateData",
      data: wineForm.value,
      success() {
        redirect({ url: "/addon/shop/pages/order/payment" });
      },
    });
  }
};
</script>

<style lang="scss" scoped>
.select-package {
  min-height: calc(100vh - 130rpx);
  background: #f5f6fa;
  padding: 26rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 130rpx;
}

.section {
  width: 100%;
  background: #fff;
  border-radius: 14px;
  margin-bottom: 14px;
  padding: 30rpx 26rpx;
  box-sizing: border-box;

  .section-title {
    font-weight: bold;
    font-size: 17px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;

    .search-icon {
      width: 28rpx;
      height: 28rpx;
      margin-right: 8rpx;
      margin-top: 2rpx;
    }
  }
}

.back-arm {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  padding: 20rpx 40rpx;
  background: #fff;
  color: #fff;
  font-size: 30rpx;
  font-weight: 500;
  height: 86rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .back-Right {
    background: #fff;
    width: 27%;
    text-align: center;
    border-radius: 50rpx;
    height: 76rpx;
    line-height: 76rpx;
    color: #fff;
    background: linear-gradient(to right, #ff1919, #ff4000);
  }

  .back-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 26rpx;
    color: #3d3d3d;
    margin: 6rpx 0 0;

    view {
      color: #000;
    }

    .price-text {
      font-size: 38rpx;
      color: #ff0000;
    }
  }
}

.volume-row {
  display: flex;
  align-items: center;
  margin-top: 10px;

  .volume-picker {
    border-radius: 30px;
    padding: 14rpx 48rpx;
    font-size: 16px;
    margin-right: 24px;
    color: #757575;
    background: #f1f1f1;
    border: 1px solid transparent;
    &:last-child {
      margin-right: 0;
    }
  }
  .active {
    color: #f00;
    background: #fdf0f0;
    border: 1px solid #ff0000;
  }
}

.question {
  width: 100%;
  background: #fff;
  border-radius: 14px;
  margin-bottom: 14px;
  padding: 15px 22px 15px 27px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 32rpx;

  .question-img {
    width: 20px;
    height: 20px;
  }
}
</style>
